<template>
  <div>
    <a-breadcrumb>
      <a-breadcrumb-item> <a href="/home">首页</a></a-breadcrumb-item>
      <a-breadcrumb-item><a href="">工作票处理</a></a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="查询条件" style="width: 100%;">

      <a-form
        ref="formRef"
        layout="inline"
      >
        <a-form-item ref="workTicketCode" label="编号" name="workTicketCode">
          <a-input name="workTicketCode" maxlength="100"/>
        </a-form-item>
        <a-form-item ref="workLeader" label="" name="workLeader">
          <a-radio-group v-model:value="radioValue">
            <a-radio-button value="a">全部</a-radio-button>
            <a-radio-button value="c">未处理</a-radio-button>
            <a-radio-button value="b">已处理</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-table :dataSource="dataSource" :columns="columns"
             :scroll="{ x: 1300 }">
      <template  #workTicketCode="{ record }">
        <a>{{ record.workTicketCode }}</a>
      </template>
      <template #action="{ record }">
      <span v-if="record.handleState=='未处理'">
        <a>同意</a>
        <a-divider type="vertical" />
        <a>驳回</a>
      </span>
      <span v-if="record.handleState!='未处理'" style="color:#929292;">
        <span>同意</span>
        <a-divider type="vertical" />
        <span>驳回</span>
      </span>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'

export default defineComponent({
  name: 'word-template',
  setup () {
    return {
      radioValue: 'a',
      locale,
      dataSource: [
        {
          key: '1',
          workTicketCode: '朝阳-通信运检二班-202102-0000',
          workLeaderPhone: '北湾66kV变电站',
          dutyLeader: '郑国耀',
          dutyLeaderPhone: '17211467645',
          createUser: '赵爱国',
          createTime: '2022-02-11 08:30',
          handleState: '已驳回'
        },
        {
          key: '2',
          workTicketCode: '朝阳-通信运检二班-202102-0001',
          workLeaderPhone: '北湾66kV变电站',
          dutyLeader: '王国伟',
          dutyLeaderPhone: '13211467645',
          createUser: '赵爱国',
          createTime: '2022-01-11 08:32',
          handleState: '已同意'
        },
        {
          key: '3',
          workTicketCode: '朝阳-通信运检二班-202102-0002',
          workLeaderPhone: '北湾66kV变电站',
          dutyLeader: '孙国华',
          dutyLeaderPhone: '15211467645',
          createUser: '赵爱国',
          createTime: '2022-01-08 08:20',
          handleState: '未处理'
        }
      ],

      columns: [
        {
          title: '工作票编号',
          dataIndex: 'workTicketCode',
          key: 'workTicketCode',
          slots: { title: 'customTitle', customRender: 'workTicketCode' }
        },
        {
          title: '工作场所名称',
          dataIndex: 'workLeaderPhone',
          key: 'workLeaderPhone'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime'
        },
        {
          title: '状态',
          dataIndex: 'handleState',
          key: 'handleState'
        },
        {
          title: '操作',
          fixed: 'right',
          slots: { customRender: 'action' },
          key: 'action',
          width: 160
        }
      ]
    }
  }
})
</script>

<style scoped>

</style>
